 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="Pragma" content="no-cache">
		<title>Guitar Pro Viewer</title>
		<script language="JavaScript" type="text/javascript" src="jquery.min.js"></script>
		<script language="JavaScript" type="text/javascript" src="alphaTab.js"></script>
		<script language="JavaScript" type="text/javascript" src="jquery.alphaTab.js"></script>
		<script language="JavaScript" type="text/javascript" src="jquery.alphaTab.player.js"></script>
        <style type="text/css">@import url('alphaTab.css');</style>
    </head>
	<body>
<script language="JavaScript" type="text/javascript"> 
var api = null;
$(document).ready(function() { 
    api = $('div.alphaTab').alphaTab({
        file: 'Serenade.gp5', 
        track: 0, 
        loadCallback: function(song) {
        }
    }).player({
        playerTickCallback:'onTickChanged'
    });
});
function onTickChanged(tickPosition) {
    api.updateCaret(tickPosition);
}
</script>
        <div class="alphaTab"></div>				
        <a href="javascript:api.play();">play</a>
    </body>
</html>				
				
